<template>
  <div class="app-container"
       v-loading="loading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading">
    <div class="h-2 w-100 d-flex">
      <!-- 公共区域控制 -->
      <div class="h-100 w-2 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">公共区域控制</div>
            </div>
          </div>
          <div class="d-flex flex-column justify-content-between item_content pt-3 pb-1">
            <div class="h-100 d-flex flex-column justify-content-between">
              <div class="height-45 d-flex align-items-center justify-content-between" v-if="oneCarData0.deviceCode">
                <div
                  @click="setStatusByDevice(oneCarData0, 'one')"
                  :class="dataCardBgColor[oneCarData0.socketColor]"
                  class="width-30 h-100 p-1 d-flex flex-column align-items-center justify-content-around border_two">
                  <div class="font-white font-14">东1</div>
                  <div class="d-flex-center">
                    <el-image class="image_size" :src="lamp" fit="cover"></el-image>
                  </div>
                </div>
                <div
                  @click="setStatusByDevice(oneCarData1, 'one')"
                  :class="dataCardBgColor[oneCarData1.socketColor]"
                  class="width-30 h-100 p-1 d-flex flex-column align-items-center justify-content-around border_two">
                  <div class="font-white font-14">东2</div>
                  <div class="d-flex-center">
                    <el-image class="image_size" :src="lamp" fit="cover"></el-image>
                  </div>
                </div>
                <div
                  @click="setStatusByDevice(oneCarData2, 'one')"
                  :class="dataCardBgColor[oneCarData2.socketColor]"
                  class="width-30 h-100 p-1 d-flex flex-column align-items-center justify-content-around border_two">
                  <div class="font-white font-14">西</div>
                  <div class="d-flex-center">
                    <el-image class="image_size" :src="lamp" fit="cover"></el-image>
                  </div>
                </div>
              </div>
              <div class="height-45 d-flex align-items-center justify-content-between" v-if="oneCarData3.deviceCode">
                <div
                  @click="setStatusByDevice(oneCarData3, 'one')"
                  :class="dataCardBgColor[oneCarData3.socketColor]"
                  class="width-30 h-100 p-1 d-flex flex-column align-items-center justify-content-around border_two">
                  <div class="font-white font-14">应</div>
                  <div class="d-flex-center">
                    <el-image class="image_size" :src="yjgyd" fit="cover"></el-image>
                  </div>
                </div>
                <div
                  @click="setStatusByDevice(oneCarData4, 'one')"
                  :class="dataCardBgColor[oneCarData4.socketColor]"
                  class="width-30 h-100 p-1 d-flex flex-column align-items-center justify-content-around border_two">
                  <div class="font-white font-14">水</div>
                  <div class="d-flex-center">
                    <el-image class="image_size" :src="rsq" fit="cover"></el-image>
                  </div>
                </div>
                <div
                  @click="setStatusByDevice(oneCarData5, 'one')"
                  :class="dataCardBgColor[oneCarData5.socketColor]"
                  class="width-30 h-100 p-1 d-flex flex-column align-items-center justify-content-around border_two">
                  <div class="font-white font-14">洗</div>
                  <div class="d-flex-center">
                    <el-image class="image_size" :src="xyj" fit="cover"></el-image>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 1号楼5层 房间照明智能控制设置 -->
      <div class="h-100 w-4 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">1号楼5层 房间照明智能控制设置</div>
            </div>
          </div>
          <div class="d-flex align-items-center justify-content-between item_content pt-2">
            <div class="h-100 width-48 border_one font-white font-14 pt-2 pb-2 pl-3 pr-3"
                 v-for="(item,index) in twoCardData" :key="index">
              <div class="h-100 w-100 position-relative">
                <div class="h-50 d-flex">
                  <div class="h-100 w-40 d-flex align-items-center">
                    <div class="d-flex-center">
                      <el-image class="item_width item_height" :src="twoCardStatus[index]==0?lamp_set_close:lamp_set"
                                fit="cover"></el-image>
                    </div>
                  </div>
                  <div class="h-100 w-60 pt-3 pb-3 d-flex flex-column justify-content-between">
                    <div>照明使用时段{{index + 1}}</div>
                    <div class="d-flex align-items-center justify-content-between">
                      <div>启用状态：</div>
                      <div>
                        <el-switch
                          @change="updateRule(item)"
                          v-model="item.isUse"
                          :active-value="1"
                          :inactive-value="0"
                          active-color="#13ce66"
                          inactive-color="#ff4949">
                        </el-switch>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="h-50 d-flex flex-column justify-content-around">
                  <div class="d-flex-center">
                    <div>开</div>
                    <div>启</div>
                    <div>时</div>
                    <div>间</div>
                    <div>：</div>
                    <div class="d-flex justify-content-end">
                      <el-time-picker
                        @change="updateRule(item)"
                        v-model="item.openTime"
                        style="width: 97%;"
                        size="small"
                        format="HH:mm"
                        value-format="HH:mm"
                        placeholder="任意时间点">
                      </el-time-picker>
                    </div>
                  </div>
                  <div class="d-flex-center">
                    <div>关</div>
                    <div>闭</div>
                    <div>时</div>
                    <div>间</div>
                    <div>：</div>
                    <div class="d-flex justify-content-end">
                      <el-time-picker
                        @change="updateRule(item)"
                        v-model="item.closeTime"
                        style="width: 97%;"
                        size="small"
                        format="HH:mm"
                        value-format="HH:mm"
                        placeholder="任意时间点">
                      </el-time-picker>
                    </div>
                  </div>
                </div>
                <div class="position-absolute cursor-pointer" style="top: 0; right: 0;">
                  <div class="d-flex-center" @click="openWeekDialog(item)">
                    <el-image class="week" :src="week" fit="cover"></el-image>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 1号楼5层 房间空调智能控制设置 -->
      <div class="h-100 w-6 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">1号楼5层 房间空调智能控制设置</div>
            </div>
          </div>
          <div class="d-flex align-items-center justify-content-between item_content pt-2">
            <div class="h-100 width-49 border_one font-white font-14 pt-2 pb-2 pl-3 pr-3"
                 v-for="(item,index) in threeCardData" :key="index">
              <div class="h-100 w-100 position-relative">
                <div class="h-50 d-flex">
                  <div class="h-100 width-30 d-flex align-items-center">
                    <div class="d-flex-center">
                      <el-image class="item_width item_height" :src="threeCardStatus[index]==0?kt_set_close:kt_set"
                                fit="cover"></el-image>
                    </div>
                  </div>
                  <div class="h-100 width-70 pt-3 pb-3 d-flex flex-column justify-content-between">
                    <div>空调使用时段{{index + 1}}</div>
                    <div class="d-flex align-items-center justify-content-between">
                      <div>启用状态：</div>
                      <div>
                        <el-switch
                          @change="updateRule(item)"
                          v-model="item.isUse"
                          :active-value="1"
                          :inactive-value="0"
                          active-color="#13ce66"
                          inactive-color="#ff4949">
                        </el-switch>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="h-50 d-flex flex-column justify-content-around">
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center w-100">
                      <div>开</div>
                      <div>启</div>
                      <div>模</div>
                      <div>式</div>
                      <div>：</div>
                      <el-select @change="updateRule(item)" v-model="item.model" size="small" style="width: 100%;"
                                 placeholder="请选择">
                        <el-option
                          v-for="item in ktOptions"
                          :key="item.command"
                          :label="item.commandName"
                          :value="item.command">
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex-center w-50">
                      <div>开</div>
                      <div>启</div>
                      <div>时</div>
                      <div>间</div>
                      <div>：</div>
                      <div class="">
                        <el-time-picker
                          @change="updateRule(item)"
                          v-model="item.openTime"
                          style="width: 97%;"
                          size="small"
                          format="HH:mm"
                          value-format="HH:mm"
                          placeholder="任意时间点">
                        </el-time-picker>
                      </div>
                    </div>
                    <div class="d-flex-center w-50">
                      <div>关</div>
                      <div>闭</div>
                      <div>时</div>
                      <div>间</div>
                      <div>：</div>
                      <div class="d-flex justify-content-end">
                        <el-time-picker
                          @change="updateRule(item)"
                          v-model="item.closeTime"
                          style="width: 97%;"
                          size="small"
                          format="HH:mm"
                          value-format="HH:mm"
                          placeholder="任意时间点">
                        </el-time-picker>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="position-absolute cursor-pointer" style="top: 0; right: 0;">
                  <div class="d-flex-center" @click="openWeekDialog(item)">
                    <el-image class="week" :src="week" fit="cover"></el-image>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="h-4 w-100 d-flex">
      <!-- 照明控制 -->
      <div class="h-100 w-2 p10">
        <div class="h-100 w-100 item_border">
          <div class="item_title pt5px pr10 pl10">
            <div class="w-100 h-100 d-flex d-flex-center justify-content-between">
              <div class="d-flex align-items-center">
                <div class="success_point"></div>
                <div class="font-white font-14">照明控制</div>
              </div>
              <div class="allControl" @click="openAllControlDialog('zm','照明控制')">一键控制</div>
            </div>
          </div>
          <div class="item_content">
            <div class="w-100 h-100 d-flex flex-wrap justify-content-between">
              <template v-for="(item,index) in fourCarData">
                <div v-if="index == 0" :key="index" class="w-100 height-25 d-flex-center p10">
                  <div @click="setStatusByDevice(item, 'four')"
                       class="w-50 h-100">
                    <div :class="dataCardBgColor[item.socketColor]"
                         class="w-100 h-100 d-flex-center border_two over-hidden p10">
                      <div class="w-100 h-100 d-flex flex-column align-items-center justify-content-around">
                        <div class="font-white font-14 text-center">{{ fourCardTitle[index] }}</div>
                        <div class="d-flex-center">
                          <el-image class="image_size" :src="lamp" fit="cover"></el-image>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else :key="index" class="w-50 height-25 p10">
                  <div @click="setStatusByDevice(item, 'four')"
                       class="w-100 h-100">
                    <div :class="dataCardBgColor[item.socketColor]"
                         class="w-100 h-100 d-flex-center border_two over-hidden p10">
                      <div class="w-100 h-100 d-flex flex-column align-items-center justify-content-around">
                        <div class="font-white font-14 text-center">{{ fourCardTitle[index] }}</div>
                        <div class="d-flex-center">
                          <el-image class="image_size" :src="lamp" fit="cover"></el-image>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
      <!-- 空调控制 -->
      <div class="h-100 w-5 p10">
        <div class="h-100 w-100 item_border">
          <div class="item_title pt5px pr10 pl10">
            <div class="w-100 h-100 d-flex align-items-center justify-content-between">
              <div class="d-flex align-items-center">
                <div class="success_point"></div>
                <div class="d-flex-center font-white font-14 cursor-pointer">
                  <div :class="isShowKt?'white2':'white'" @click="ktkgClick(isShowKt)">控制遥控器</div>
                  <div class="mr-1 ml-1">/</div>
                  <div :class="isShowKt?'white':'white2'" @click="ktkgClick(isShowKt)">空调开关</div>
                </div>
              </div>
              <div v-if="!isShowKt" class="allControl" @click="openAllControlDialog('kt','空调控制器')">一键控制</div>
              <div v-else class="allControl" @click="openAllControlDialog('ktkg','空调开关')">一键控制</div>
            </div>
          </div>
          <div class="item_content">
            <div class="h-100 w-100 d-flex flex-wrap" v-if="!isShowKt">
              <div class="width-15 height-33 p10" v-for="(item,index) in fiveCardData" :key="index">
                <div class="w-100 h-100 border_two p10" :class="dataCardBgColor[item.socketColor]">
                  <div @click="setStatusByDevice(item, 'five')"
                       class="w-100 h-100 d-flex flex-column justify-content-between">
                    <div class="font-white font-14">{{ fiveCardTitle[index] }}</div>
                    <div class="d-flex-center">
                      <el-image class="image_size" :src="kt_list" fit="cover"></el-image>
                    </div>
                    <div class="font-white font-14 text-right">{{item.airTmp}}°C</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="h-100 w-100 d-flex flex-wrap" v-else>
              <div class="width-15 height-33 p10" v-for="(item,index) in fiveCardData2" :key="index">
                <div class="w-100 h-100 border_two p10" :class="dataCardBgColor[item.socketColor]">
                  <div @click="setStatusByDevice(item, 'five2')"
                       class="w-100 h-100 d-flex flex-column align-items-center justify-content-around">
                    <div class="font-white font-14">{{ fiveCardTitle[index] }}</div>
                    <div class="item_width item_height border_two p-2 d-flex-center">
                      <div class="d-flex-center">
                        <el-image class="image_size" :src="ktkg_list" fit="cover"></el-image>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 插座控制 -->
      <div class="h-100 w-5 p10">
        <div class="h-100 w-100 item_border">
          <div class="item_title pt5px pr10 pl10">
            <div class="w-100 h-100 d-flex d-flex-center justify-content-between">
              <div class="d-flex align-items-center">
                <div class="success_point"></div>
                <div class="font-white font-14">插座控制</div>
              </div>
              <div class="allControl" @click="openAllControlDialog('cz','插座控制')">一键控制</div>
            </div>
          </div>
          <div class="item_content">
            <div class="h-100 w-100 d-flex flex-wrap">
              <div class="width-15 height-33 p10" v-for="(item,index) in sixCardData" :key="index">
                <div class="w-100 h-100 border_two p10" :class="dataCardBgColor[item.socketColor]">
                  <div @click="setStatusByDevice(item, 'six')"
                       class="w-100 h-100 d-flex flex-column align-items-center justify-content-around">
                    <div class="font-white font-14">{{ fiveCardTitle[index] }}</div>
                    <div class="item_width item_height d-flex-center border_two">
                      <el-image class="image_size" :src="socket" fit="cover"></el-image>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 指令控制 -->
    <yc-dialog ref="controlDialog" dialogTitle="指令控制" :showCenter="false">
      <template #content>
        <div class="w-100 h-100 controlDialog" v-loading="loading2" element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading">
          <div class="mb-3" v-for="(item,index) in controlDataList" :key="index">
            <div class="mb-2 font-16 ml-1 white">{{item.name}}</div>
            <div class="d-flex flex-wrap">
              <div class="mr-2 ml-2 mb-3" v-for="(itemY,indexY) in item.list" :key="indexY"
                   @click="editControl(itemY, 'kt')">
                <div class="button_color white pl-3 pr-3 pt-2 pb-2 ">{{itemY.commandName}}</div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <el-button @click="$refs.controlDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>

    <!-- 一键控制 -->
    <yc-dialog ref="allControlDialog" :dialogTitle="dialogTitle" :showCenter="false">
      <template #content>
        <div class="w-100 h-100 controlDialog">
          <div class="mb-1">
            <el-checkbox
              class="mb-2 white"
              @change="handleCheckAllChange"
              :indeterminate="isIndeterminate"
              v-model="checkAll"
            >房间
            </el-checkbox>
            <el-checkbox-group class="ml-4" v-model="checkControlDataList" @change="handleCheckedCitiesChange">
              <el-checkbox class="mb-3" v-for="(itemY,indexY) in allControlData" :label="itemY" :key="itemY.deviceCode">
                {{itemY.deviceName}}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="mb-2 font-18 ml-1 white">操作类型</div>
          <div class="mb-3 pl-4">
            <template v-if="operateType == 'kt'">
              <div class="d-flex align-items-center">
                <div class="font-16 white">模式：</div>
                <el-select @change="selectChange" v-model="command"
                           placeholder="请选择">
                  <el-option
                    v-for="item in ktOptions3"
                    :key="item.command"
                    :label="item.commandName"
                    :value="item.command">
                  </el-option>
                </el-select>
              </div>

            </template>
            <template v-else>
              <el-radio v-model="checkRadioData" v-for="item in operateTypeData" :label="item" :key="item.command">
                {{item.commandName}}
              </el-radio>
            </template>
          </div>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" :loading="addOrUpdateLoading" @click="allDialogSave">确定</el-button>
        <el-button @click="$refs.allControlDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>

    <!-- 选择星期 -->
    <yc-dialog ref="weekDialog" :dialogTitle="dialogTitle" :showCenter="false" dialog-width="30%">
      <template #content>
        <div class="w-100 h-100 controlDialog">
          <div class="mb-4">
            <div class="d-flex align-items-center mb-3 font-18 white">
              <div class="line mr-2"></div>
              <div>选择开始星期</div>
            </div>
            <div class="d-flex">
              <div class="mr-3 p-2 week_normal white radius50 week"
                   :class="weekObj.opWeekDay.indexOf(itemY.value) != -1 ? 'week_check' : ''"
                   v-for="(itemY,indexY) in weekData"
                   :key="itemY.value" @click="handleClickWeek2(itemY.value)">{{itemY.name}}
              </div>
            </div>
          </div>
          <div class="mb-4">
            <div class="d-flex align-items-center mb-3 font-18 white">
              <div class="line mr-2"></div>
              <div>选择结束星期</div>
            </div>
            <div class="d-flex">
              <div class="mr-3 p-2 week_normal white radius50 week"
                   :class="weekObj.clWeekDay.indexOf(itemY.value) != -1 ? 'week_check' : ''"
                   v-for="(itemY,indexY) in weekData"
                   :key="itemY.value" @click="handleClickWeek1(itemY.value)">{{itemY.name}}
              </div>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" :loading="addOrUpdateLoading" @click="saveWeekButton(weekObj)">确定</el-button>
        <el-button @click="$refs.weekDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>
  </div>
</template>

<script>
  import {
    queryOneListControlByStatus,
    queryFourListControlByStatus,
    queryFiveListControlByStatus,
    querySixListControlByStatus,
    setStatusByDevice,
    queryFiveListControlByStatusV2
  } from "@/api/dormOneBuildingFiveFloor/electricityManagement"

  import {
    queryRule, updateRule, updateRuleV2, batchControl, queryPicLight
  } from "@/api/user.js"
  import {
    queryControlList,
    queryControlListV2,
    queryControlListV3,
    makeDeviceControl
  } from "@/api/dormOneBuildingOneFloor/electricityManagement"
  import { dormOneBuildingFiveFloorDevice } from "@/settings"
  import ycDialog from "@/components/pageDialog"

  export default {
    components: {ycDialog},
    data() {
      return {
        yjgyd: require('@/assets/img/yjgyd.png'),
        xyj: require('@/assets/img/xyj.png'),
        rsq: require('@/assets/img/rsq.png'),
        lamp: require('@/assets/img/lamp.png'),
        socket: require('@/assets/img/socket.png'),
        dorm: require('@/assets/img/dorm.png'),
        lamp_set: require('@/assets/img/lamp_set.png'),
        kt_set: require('@/assets/img/kt_set.png'),
        lamp_set_close: require('@/assets/img/lamp_set_close.png'),
        kt_set_close: require('@/assets/img/kt_set_close.png'),
        kt_list: require('@/assets/img/kt_list.png'),
        ktkg_list: require('@/assets/img/ktkg.png'),
        week: require('@/assets/img/week.png'),

        timeout: [],

        switchData: true,
        ktOptions: [],
        ktOptions3: [],

        weekData: [
          {name: '一', value: 'MONDAY'},
          {name: '二', value: 'TUESDAY'},
          {name: '三', value: 'WEDNESDAY'},
          {name: '四', value: 'THURSDAY'},
          {name: '五', value: 'FRIDAY'},
          {name: '六', value: 'SATURDAY'},
          {name: '日', value: 'SUNDAY'},
        ],
        weekObj: {
          id: '',
          isUse: '',
          openTime: '',
          closeTime: '',
          model: '',
          modelName: '',
          opWeekDay: [],
          clWeekDay: [],
        },

        oneCarData0: {},
        oneCarData1: {},
        oneCarData2: {},
        oneCarData3: {},
        oneCarData4: {},
        oneCarData5: {},

        twoCardData: [],
        twoCardStatus: [],
        threeCardData: [],
        threeCardStatus: [],

        fourCarData: [],
        fourCardTitle: ['宿管间', '1501-1506室', '1507-1513室', '1515室', '1516室', '1517室', '1518室'],

        dataCardBgColor: ['item_bg_close', 'item_bg_open', 'item_bg_danger', 'item_bg_blue', 'item_bg_warning', 'bg-index-red', 'bg-index-orange'],
        fiveCardTitle: ['1501室', '1502室', '1503室', '1504室', '1505室', '1506室', '1507室', '1508室', '1509室',
          '1510室', '1511室', '1512室', '1513室', '1515室', '1516室', '1517室', '1518室', '宿管间'],
        fiveCardData: [],
        fiveCardData2: [],

        sixCardData: [],

        dataItem: {},
        cardIndex: "",

        isShowKt: false,

        dialogTitle: "",
        command: "",
        addOrUpdateLoading: false,
        allControlData: [],
        checkAll: false,
        isIndeterminate: false,

        loading: false,
        loading2: false,
        controlDataList: [],
        checkControlDataList: [],
        operateType: "",
        operateTypeData: [
          {command: '65365', commandName: '合闸', parameterCode: 'CTRL',},
          {command: '65280', commandName: '分闸', parameterCode: 'CTRL',}
        ],
        checkRadioData: {
          command: ""
        },
      }
    },
    created() {
      this.queryRule()
      this.queryControlListTest()
      this.queryPicLight()

      this.queryOneListControlByStatus()
      this.queryFourListControlByStatus()
      this.queryFiveListControlByStatus()
      this.queryFiveListControlByStatusV2()
      this.querySixListControlByStatus()
    },
    mounted() {
      let _this = this;
      this.timeout[0] = setInterval(() => {
        _this.queryOneListControlByStatus()
        _this.queryFourListControlByStatus()
        _this.queryFiveListControlByStatus()
        _this.queryFiveListControlByStatusV2()
        _this.querySixListControlByStatus()
        _this.queryPicLight()
      }, 5000);

      //
      // this.timeout[1] = setInterval(() => {

      // }, 30000);
    },
    beforeDestroy() {
      if (this.timeout.length > 0) {
        this.timeout.forEach(item => {
          clearInterval(item);
        })
      }
    },
    methods: {
      queryControlListTest() {
        queryControlListV2({
          deviceCode: 'DEVC2407258259342'
        }).then(res => {
          let tempData = res.object
          this.ktOptions = tempData[0].list
        })
      },
      queryRule() {
        queryRule({
          areaCode: '1-5'
        }).then(res => {
          let tempData = res.object

          this.twoCardData = tempData.zm
          this.threeCardData = tempData.kt
        })
      },
      queryPicLight() {
        queryPicLight({
          areaCode: '1-5'
        }).then(res => {
          let tempData = res.object
          this.twoCardStatus = tempData.slice(0, 2)
          this.threeCardStatus = tempData.slice(2, 4)
        })
      },
      updateRule(data) {
        updateRuleV2({
          id: data.id,
          isUse: data.isUse,
          openTime: data.openTime,
          closeTime: data.closeTime,
          model: data.model,
          modelName: data.modelName,
          opWeekDay: data.opWeekDay,
          clWeekDay: data.clWeekDay,
        }).then(res => {
          if (res.status == 200) {
            this.$message({
              type: "success",
              message: res.message
            })
            this.queryRule()
          } else {
            this.queryRule()
          }
        })
      },

      openWeekDialog(data) {
        this.weekObj.id = data.id
        this.weekObj.isUse = data.isUse
        this.weekObj.openTime = data.openTime
        this.weekObj.closeTime = data.closeTime
        this.weekObj.model = data.model
        this.weekObj.modelName = data.modelName
        this.weekObj.opWeekDay = data.opWeekDay ? data.opWeekDay.split(',') : []
        this.weekObj.clWeekDay = data.clWeekDay ? data.clWeekDay.split(',') : []

        this.dialogTitle = '选择星期'

        this.addOrUpdateLoading = false
        this.$refs.weekDialog.dialogVisible = true
      },

      handleClickWeek2(val) {
        let num = this.weekObj.opWeekDay.indexOf(val)
        if (num == -1) {
          this.weekObj.opWeekDay.push(val)
        } else {
          this.weekObj.opWeekDay.splice(num, 1)
        }
      },
      handleClickWeek1(val) {
        let num = this.weekObj.clWeekDay.indexOf(val)
        if (num == -1) {
          this.weekObj.clWeekDay.push(val)
        } else {
          this.weekObj.clWeekDay.splice(num, 1)
        }
      },

      saveWeekButton(data) {
        this.addOrUpdateLoading = true
        updateRuleV2({
          id: data.id,
          isUse: data.isUse,
          openTime: data.openTime,
          closeTime: data.closeTime,
          model: data.model,
          modelName: data.modelName,
          opWeekDay: data.opWeekDay.join(','),
          clWeekDay: data.clWeekDay.join(','),
        }).then(res => {
          if (res.status == 200) {
            this.$message({
              type: "success",
              message: res.message
            })
            this.queryRule()
            this.$refs.weekDialog.dialogVisible = false
            this.addOrUpdateLoading = false
          } else {
          }
        })
      },

      queryOneListControlByStatus() {
        queryOneListControlByStatus().then(res => {
          let tempData = res.object
          this.oneCarData0 = tempData[0]
          this.oneCarData1 = tempData[1]
          this.oneCarData2 = tempData[2]
          this.oneCarData3 = tempData[3]
          this.oneCarData4 = tempData[4]
          this.oneCarData5 = tempData[5]
        })
      },
      queryFourListControlByStatus() {
        queryFourListControlByStatus().then(res => {
          let tempData = res.object
          this.fourCarData = tempData
        })
      },
      queryFiveListControlByStatus() {
        queryFiveListControlByStatus().then(res => {
          let tempData = res.object
          this.fiveCardData = tempData

        })
      },
      queryFiveListControlByStatusV2() {
        queryFiveListControlByStatusV2().then(res => {
          let tempData = res.object
          this.fiveCardData2 = tempData
        })
      },
      querySixListControlByStatus() {
        querySixListControlByStatus().then(res => {
          let tempData = res.object
          this.sixCardData = tempData
        })
      },

      ktkgClick(type) {
        this.isShowKt = !type
      },

      setStatusByDevice(data, card) {
        this.dataItem = data
        this.cardIndex = card

        if (card == 'five') {
          this.queryControlList()
          this.$refs.controlDialog.dialogVisible = true
        } else {
          let obj = {}

          if (data.deviceList[data.deviceList.length - 2].deviceValue == '0') {
            obj = {
              command: '65365',
              commandName: '合闸',
              parameterCode: 'CTRL',
            }
          } else {
            obj = {
              command: '65280',
              commandName: '分闸',
              parameterCode: 'CTRL',
            }
          }
          this.editControl(obj, 'other')
        }
      },
      async queryControlList() {
        this.loading2 = true
        const {object} = await queryControlList({
          deviceCode: this.dataItem.deviceCode
        })
        this.controlDataList = object
        this.loading2 = false
      },
      editControl(data, type) {
        let titleName = '确定执行此操作吗, 是否继续?'
        if (type == 'other') {
          if (data.commandName == '合闸') {
            titleName = '确定执行合闸操作吗, 是否继续?'
          } else {
            titleName = '确定执行分闸操作吗, 是否继续?'
          }
        }
        this.$confirm(titleName, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {

          this.loading = true
          this.loading2 = true
          makeDeviceControl({
            deviceCode: this.dataItem.deviceCode,
            parameterCode: data.parameterCode,
            command: data.command,
            commandName: data.commandName,
          }).then(res => {
            if (res.status == 200 && (res.message == '指令发送成功' || res.message == '指令发送成功等待核验')) {
              setTimeout(() => {
                this.loading = false
                this.loading2 = false

                if (this.cardIndex == 'four') {
                  this.queryFourListControlByStatus()
                } else if (this.cardIndex == 'five') {
                  this.queryFiveListControlByStatus()
                } else if (this.cardIndex == 'one') {
                  this.queryOneListControlByStatus()
                } else {
                  this.querySixListControlByStatus()
                }

                this.$message({
                  type: "success",
                  message: res.message
                })
              }, 2000)
            } else {
              this.loading = false
              this.loading2 = false
            }
          })
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          })
        })
      },

      // 一键控制
      openAllControlDialog(type, dialogTitle) {
        this.dialogTitle = dialogTitle
        this.operateType = type
        this.checkAll = false
        this.isIndeterminate = false

        if (type == 'zm') {
          this.allControlData = dormOneBuildingFiveFloorDevice.zm
        } else if (type == 'kt') {
          this.allControlData = dormOneBuildingFiveFloorDevice.kt
        } else if (type == 'ktkg') {
          this.allControlData = dormOneBuildingFiveFloorDevice.ktkg
        } else {
          this.allControlData = dormOneBuildingFiveFloorDevice.cz
        }

        this.checkControlDataList = []
        this.checkRadioData = {
          command: ""
        }
        this.command = ""

        this.queryControlListV3()

        this.addOrUpdateLoading = false
        this.$refs.allControlDialog.dialogVisible = true
      },

      queryControlListV3() {
        queryControlListV3({
          deviceCode: 'DEVC2407258259342'
        }).then(res => {
          let tempData = res.object
          this.ktOptions3 = tempData[0].list
        })
      },

      handleCheckAllChange(val) {
        this.checkControlDataList = val ? this.allControlData : []
        this.isIndeterminate = false
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length
        this.checkAll = checkedCount === this.allControlData.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.allControlData.length
      },

      selectChange(val) {
        this.checkRadioData = this.ktOptions3.find(item => {
          return item.command == val
        })
      },

      allDialogSave() {
        if (this.checkControlDataList.length == 0) {
          this.$message({
            message: '请选择房间',
            type: 'warning'
          })
          return
        }
        if (!this.checkRadioData.command) {
          this.$message({
            message: '请选择操作类型',
            type: 'warning'
          })
          return
        }

        this.addOrUpdateLoading = true

        let arr = []
        arr = this.checkControlDataList.map(item => {
          return item.deviceCode
        })

        batchControl({
          deviceCodes: arr.join("&"),
          parameterCode: this.checkRadioData.parameterCode,
          command: this.checkRadioData.command,
          commandName: this.checkRadioData.commandName,
        }).then(res => {
          if (res.status == '200') {
            this.$message({
              type: "success",
              message: res.message
            })
            this.addOrUpdateLoading = false
            this.$refs.allControlDialog.dialogVisible = false
          } else {
            this.addOrUpdateLoading = false
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .height-45 {
    height: 45%;
  }

  .height-33 {
    height: 33.33%;
  }

  /*.height-33 {*/
  /*  height: 33.33%;*/
  /*}*/

  .width-70 {
    width: 70%;
  }

  .width-49 {
    width: 49%;
  }

  .width-48 {
    width: 48%;
  }

  .width-30 {
    width: 30%;
  }

  .width-15 {
    width: 16.66%;
  }

  .item_width {
    width: 80px;
  }

  .item_height {
    height: 80px;
  }

  ::v-deep .el-radio-group .el-radio__label {
    color: #ffffff !important;
  }

  .item_bg_open {
    background-color: #1AA652;
    cursor: pointer;
  }

  .item_bg_open:hover {
    transform: scale(1.05);
  }

  .item_bg_danger {
    background-color: #df547b;
    cursor: pointer;
  }

  .item_bg_danger:hover {
    transform: scale(1.05);
  }

  .item_bg_close {
    background-color: #7A7A7A;
    cursor: pointer;
  }

  .item_bg_close:hover {
    transform: scale(1.05);
  }

  .item_bg_blue {
    background: #2C637A;
    cursor: pointer;
  }

  .item_bg_blue:hover {
    transform: scale(1.05);
  }

  .item_bg_warning {
    background: #B3A12F;
    cursor: pointer;
  }

  .item_bg_warning:hover {
    transform: scale(1.05);
  }

  .bg-index-red {
    background: #AF1F1F;
    cursor: pointer;
  }

  .bg-index-red：hover {
    transform: scale(1.05);
  }

  .border_one {
    border: 1px solid rgba(10, 96, 117, 0.62);
    border-radius: 4px;
    box-shadow: 0px 2px 15.5px 0px rgba(102, 237, 246, 0.50) inset;
  }

  .border_two {
    border-radius: 6px;
  }

  .image_size {
    width: 48px;
    height: 48px;
  }

  .font-white {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
  }

  .white {
    color: #ffffff;
  }

  .button_color {
    cursor: pointer;
    background-color: #1A8B9A;
    border-radius: 4px;
  }

  .line {
    width: 5px;
    height: 20px;
    background-color: #1A8B9A;
    border-radius: 4px;
  }

  .week_normal {
    cursor: pointer;
    background-color: #335358;
  }

  .week_check {
    cursor: pointer;
    background-color: #1A8B9A;
  }
</style>

<style>
  .el-time-spinner__wrapper {
    width: 50% !important;
  }
</style>
